<template>
  <div v-if="!item.hidden">
    <t-submenu
      :value="item.path"
      v-if="item.children && item.children.length > 0"
    >
      <template #icon>
        <svg-icon :icon-class="item.meta.icon" />
      </template>
      <template #title>
        {{ item.meta.title }}
      </template>
      <top-nav-item
        v-for="child in item.children"
        :key="child.path"
        :item="child"
        class="nest-menu"
      />
    </t-submenu>
    <t-menu-item :value="item.path" v-else>
      <template #icon>
        <svg-icon :icon-class="item.meta.icon" />
      </template>
      <template #content>{{ item.meta.title }}</template>
    </t-menu-item>
  </div>
</template>

<script setup>
import { isExternal } from '@/utils/validate';
import { getNormalPath } from '@/utils/ruoyi';
const props = defineProps({
  // route object
  item: {
    type: Object,
    required: true,
  },
});

function resolvePath(routePath, routeQuery) {
  if (isExternal(routePath)) {
    return routePath;
  }
  if (routeQuery) {
    let query = JSON.parse(routeQuery);
    return {
      path: getNormalPath('/' + routePath),
      query: query,
    };
  }
  return getNormalPath('/' + routePath);
}
</script>
